<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            getParam();

            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null)
                    return unescape(r[2]);
                return null; //返回参数值
            };

            var userId = null;

            //跳转界面
            function getParam() {
                userId = getUrlParam("userId");
                $("#adda").attr("href", "/kProduct/ShowUserProduct.html?userId=" + userId);
            };

            var cart = $("#cart");//商品

            show();

            var totalPrice = 0;


            function show() {
                cart.find("tr:gt(0)").remove();
                $.get("/Kshop/cart/page", {
                    "userId": getUrlParam("userId"),
                }, function (da) {
                    $.each(da.data, function (i, d) {
                        cart.append("<tr><td>" + d.product.name +
                            "</td><td><img height='50px' width='50px' src='/imgs/" + d.product.imgs + "'>" +
                            "</td><td>" + d.product.price +
                            "</td><td>" + d.num +
                            "</td><td>" + d.num * d.product.price +
                            "</td><td><button type='button' class='btn btn-primary btn-sm' code='" + d.id + "' id='updateNum'>修改数量</button>&nbsp;" +
                            "<button type='button' class='btn btn-primary btn-sm' deld='" + d.id + "' id='shanchu'>删除</button>" +
                            "</td></tr>"
                        )
                        totalPrice = totalPrice + d.num * d.product.price;
                        $("#total").text("总价格为:" + totalPrice);
                    })

                });
            }
            ;
            var prodid = null;
            //删除事件
            cart.on("click", '#shanchu', function () {
                prodid = $(this).attr("deld");
                del();
                return false;
            });

            //ajax删除
            function del() {
                var a = confirm("是否从购物车中删除该商品?");
                if (!a)
                    return;
                $.get("/Kshop/cart/delete", {"cartId": prodid}, function (da) {
                    alert(da.msg);
                });
                location.href = "ShowUserCart.html?userId=" + getUrlParam("userId");
            };

            //展示事件
            cart.on("click", '#updateNum', function () {
                $("#div").css('display', 'block');
                prodid = $(this).attr("code");
                $("#cartid").attr("value", prodid)
                return false;
            });

            $("#button").click(function () {
                $.get("/Kshop/cart/updateNum", {"cartId": $("#cartid").val(), "num": $("#numb").val()}, function (da) {
                    alert(da.msg);
                });
                location.href = "ShowUserCart.html?userId=" + getUrlParam("userId");
            });

            //清空购物车事件
            $("#empty").click(function () {
                $.get("/Kshop/cart/empty", {"userId": getUrlParam("userId")}, function (dat) {
                    alert(dat.msg);
                })
                return false;
            });

        });
    </script>
</head>
<body>
<div class="container">
    <h2 class="text-center">展示购物车</h2>

    <!--导航-->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#" id="adda">返回展示界面</a>
        </li>
        <li class="nav-item">
            <button type="button" class="btn btn-link" id="empty">清空购物车</button>
        </li>
    </ul>
</div>

<div id="div" style="display:none;" class="container">
    <form name="form" action="#" method="post"><br>
        <div class="form-group">
            <label>购物车ID</label>
            <input type="number" name="id" id="cartid" class="form-control"/>
        </div>
        <div class="form-group">
            <label>请输入修改数量</label>
            <input type="number" name="num" id="numb" class="form-control"/>
        </div>
        <div class="form-group">
            <input type="button" value="确定" id="button" class="form-control"/>
        </div>
    </form>
</div>


<div class="container">
    <table class="table table-striped" id="cart">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>商品图片</th>
            <th>商品单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <label id="total"></label>
</div>


</body>
</html>